<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <table class="userInfoEditTable mytable" width="100%" cellspacing="0">
          <tr>
            <td align="center" style="font-size:18px" colspan="2">事件基本信息</td>
          </tr>
          <tr v-for="(v,i) in props" :key="i">
            <td class="tb_label" align="right">
              {{v.label}}:
            </td>
            <td>
              {{data.govHotlineDetailBasic[v.name]}}
            </td>
          </tr>
          <tr>
            <td align="center" style="font-size:18px" colspan="2">事件图像信息</td>
          </tr>
          <tr>
            <td align="right">
              图像信息
            </td>
            <td>
              <img v-for="(v,i) in data.dealingMedia.pictures" :key="i" style="width:200px" :src="v.url" alt="" />
              {{data.dealingMedia.pictures.length==0?'暂无资料':''}}
            </td>
          </tr>
          <tr>
            <td align="right">
              视频信息
            </td>
            <td>
              <video controls autoplay v-for="(v,i) in data.dealingMedia.video" :key="i" style="width:400px" :src="v.url" alt="" />
              {{data.dealingMedia.video.length==0?'暂无资料':''}}
            </td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane label="处理结果" v-if="data.dealingBasic.length>0" name="key">
        <table class="userInfoEditTable mytable" width="100%" cellspacing="0">
          <template style="width:100%" v-for="(k,i) in data.dealingBasic">
            <tr :key="i">
              <td colspan="2" style="font-weight:bold" align="center">处理信息({{i+1}})</td>
            </tr>
            <tr v-for="(m,n) in p" :key="n">
              <td align="right" class="tb_label">
                {{m.n}}
              </td>
              <td style="width:100%">
                {{k[m.v]}}
              </td>
            </tr>
          </template>
        </table>
      </el-tab-pane>
      <el-tab-pane label="流程信息" v-if="data.distribute.length>0" name="second">
        <table class="userInfoEditTable mytable" width="100%" cellspacing="0">
          <template style="width:100%" v-for="(k,i) in data.distribute">
            <tr :key="i">
              <td colspan="2" style="font-weight:bold" align="center">经办人({{i+1}})</td>
            </tr>
            <tr v-for="(m,n) in q" :key="n">
              <td align="right" class="tb_label">
                {{m.n}}
              </td>
              <td style="width:100%">
                {{k[m.v]}}
              </td>
            </tr>
          </template>
        </table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as api from "@/api/12345";
export default {
  props: ["id"],
  watch: {
    id: function(val) {
      this.find(val);
      this.activeName = 'first';
    }
  },
  data() {
    return {
      p: [
        {
          n: "工单编号",
          v: "orderID"
        },
        {
          n: "处理人姓名",
          v: "userName"
        },
        {
          n: "所属部门",
          v: "dept"
        },
        {
          n: "联系电话",
          v: "mobileTel"
        },
        {
          n: "处理信息",
          v: "dealingInf"
        },
        {
          n: "处理时间",
          v: "dealingTime"
        },
        {
          n: "备注",
          v: "remark"
        }
      ],
      q: [
        {
          n: "工单编号",
          v: "orderID"
        },
        {
          n: "派发人姓名",
          v: "userName"
        },
        {
          n: "派发人部门",
          v: "dept"
        },
        {
          n: "接收人姓名",
          v: "acceptedUserName"
        },
        {
          n: "接收人单位",
          v: "acceptedUserDept"
        },
        {
          n: "开始时间",
          v: "startTime"
        },
        {
          n: "结束时间",
          v: "endTime"
        },
        {
          n: "备注",
          v: "remark"
        }
      ],
      data: {
        govHotlineDetailBasic: {
          orderID: "1",
          orderStatus: "处理中",
          customerName: "213",
          customerGender: "女",
          customerContact: "123",
          orderSource: "321",
          createTime: 1542788699000,
          orderType: "咨询",
          planTime: 1542875104000,
          content: "21312",
          remark: "3123",
          suggestion: "123123",
          reportPerson: null,
          realName: "WEB",
          dept: "admin",
          mobileTel: "123213"
        },
        dealingMedia: { video: [], pictures: [] },
        dealingBasic: [],
        distribute: [
          {
            distributeID: 2,
            orderID: 1,
            userName: "admin",
            dept: "admin",
            acceptedUserName: null,
            acceptedUserDept: null,
            startTime: null,
            endTime: "2018-11-30 00:00:00.0",
            remark: "12321321"
          }
        ]
      },

      message: "",
      code: 200,
      activeName: "first",
      props: [
        {
          name: "orderID",
          label: "工单编号"
        },
        {
          name: "orderStatus",
          label: "工单状态"
        },
        {
          name: "customerName",
          label: "客户姓名"
        },
        {
          name: "customerGender",
          label: "客户性别"
        },
        {
          name: "customerContact",
          label: "联系号码"
        },
        {
          name: "orderSource",
          label: "工单来源"
        },
        {
          name: "createTime",
          label: "创建时间"
        },
        {
          name: "orderType",
          label: "工单类型"
        },
        {
          name: "planTime",
          label: "计划完成时间"
        },
        {
          name: "content",
          label: "内容描述"
        },
        {
          name: "remark",
          label: "备注"
        },
        {
          name: "suggestion",
          label: "处理意见"
        }
      ]
    };
  },
  methods: {
    async find() {
      this.data = (await api.getHotlineDetail(this.id)).data;
    }
  },
  mounted() {
    this.activeName = "first";
    this.find();
  }
};
</script>

<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  border: 1px solid darkgrey;
  padding: 10px;
}
.mytable {
  border-collapse: collapse;
  background-color: white;
}
.tb_label {
  width: 20%;
  text-align: right;
}
</style>
